<template>
	<view style="padding-bottom: 20rpx;">
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="任务名称：" name="任务名称">
					<input style="font-size: 30rpx;" maxlength="18" v-model="params['任务名称']" placeholder="请输入任务名称" @input="binddata('房屋号',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="任务描述：" name="任务描述">
					<input style="font-size: 30rpx;" maxlength="18" v-model="params['任务描述']" placeholder="请输入任务描述" @input="binddata('任务描述',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item label="任务优先级：" name="任务优先级">
					<view :class="label == '请选择任务优先级' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" @click="handleTap('picker')" 
					 mode="selector" :list="taskLevelList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<!-- <uni-forms-item label="任务执行人：" name="执行人id">
					<view :class="label1 == '请选择任务执行人' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
					<lb-picker ref="picker1" @click="handleTap('picker1')" 
					 mode="selector" :list="unitList" :dataset="{ name: 'label1' }" @confirm="handleConfirm1" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="任务抄送人：" name="抄送人id">
					<view :class="label2 == '请选择任务抄送人' ? 'color':''" class="tap" @click="handleTap('picker2')">{{label2}}</view>
					<lb-picker ref="picker2" @click="handleTap('picker2')" 
					 mode="selector" :list="unitList" :dataset="{ name: 'label2' }" @confirm="handleConfirm2" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item> -->
				<uni-forms-item required label="开始时间" name="开始日期">
					<date-picker v-model="params['开始日期']" placeHolder="请选择开始时间" @input="binddata('开始日期',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required label="结束时间" name="结束日期">
					<date-picker v-model="params['结束日期']" placeHolder="请选择结束时间" @input="binddata('结束日期',$event)"></date-picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="btn" @click="submitForm">提交</button>
	</view>
</template>

<script>
	// import uploader from '@/myComponents/image-uploader.vue'
	import DatePicker from '@/myComponents/date-picker.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	// import { showModal } from '@/utils/common.js'
	export default {
		components: {
			// uploader,
			DatePicker,
			LbPicker
		},
		data() {
			return {
				type: '',
				item: {},
				isEdit: false,
				unitList: [],
				selected: [11111,11112],
				unfoldPath: [1, 11, 2, 21, 22],
				list: [],
				label: '请选择任务优先级',
				label1: '请选择任务执行人',
				label2: '请选择任务抄送人',
				value: '',
				value1: '',
				value2: '',
				// installTypeList: this.$type.installTypeList,
				params: {
					任务名称: null,
					任务描述: null,
					任务优先级: null,
					执行人id: null,
					抄送人id: null,
					开始日期: null,
					结束日期: null,
					子任务: []
				},
				taskLevelList: this.$type.taskLevelList,
				//表单验证规则
				rules: {
					任务名称: {
						rules: [{
							required: true,
							errorMessage: '请填写任务名称',
						}]
					},
					任务描述: {
						rules: [{
							required: true,
							errorMessage: '请填写任务描述',
						}]
					},
					// 执行人id: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写房屋性质',
					// 	}]
					// },
					// 抄送人id: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写证件类型',
					// 	}]
					// },
					开始日期: {
						rules: [{
							required: true,
							errorMessage: '请填写证件编号',
						}]
					},
					结束日期: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋面积'
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onShow() {
			this.type = uni.getStorageSync('type')
			if(this.type === 'edit') {
				this.params = uni.getStorageSync('childTask')
				this.params.开始日期 = dayjs(this.params.开始日期).format('YYYY-MM-DD')
				this.params.结束日期 = dayjs(this.params.结束日期).format('YYYY-MM-DD')
			}
			// this.params = uni.getStorageSync('childTask')
		},
		onLoad(options) {
			// this.getPartitionList()
			if(options.taskItem) {
				this.isEdit = true
				this.params = JSON.parse(options.taskItem)
				this.label = this.params.任务优先级
				this.params.开始日期 = dayjs(this.params.开始日期).format('YYYY-MM-DD')
				this.params.结束日期 = dayjs(this.params.结束日期).format('YYYY-MM-DD')
			}
			this.item = JSON.parse(options.item)
		},
		methods: {
			itemClick(e){
				console.log(e)
				
				//如果不启用内置的点击选中效果，可以用下面的代码自己赋值selected
				// let id = e.id
				// let isHas = false
				// for(var i = 0; i < this.selected.length; i++){
				// 	if(this.selected[i] == id)
				// 	{
				// 		isHas = true
				// 		this.selected.splice(i,1)
				// 	}
				// }
				// if(!isHas){
				// 	this.selected.push(id)
				// }
				// console.log(this.selected)
			},
			itemEdit(ev){
				console.log(ev)
				if(ev.isEdit){
					uni.showToast({
					    title: '你在编辑:'+ ev.item.name,
					    duration: 2000,
					})
				}
				if(ev.isDel){
					uni.showModal({
						content: '您确定要删除' + ev.item.name +'?',
						showCancel: true,
						complete: e => {
							if(ev.item.parentId.length === 0) {
								let index = this.list.findIndex(item => item.id == ev.item.id)
								this.list.splice(index, 1)
							}else if(ev.item.parentId.length === 1) {
								let index = this.list.findIndex(item => item.id == ev.item.parentId[0])
								this.list[index].child.splice(index, 1)
							}
						}
					})
				}
			},
			switchFold(e) {
				console.log('当前折叠路径为： ',e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			// 任务优先级
			handleConfirm(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.任务优先级 = e.item.id
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 楼栋
			handleConfirm1(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 单元
			handleConfirm2(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 房屋类型
			handleConfirm3(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					res.开始日期 = dayjs(res.开始日期).format('YYYY-MM-DDTHH:mm:ssZ')
					res.结束日期 = dayjs(res.结束日期).format('YYYY-MM-DDTHH:mm:ssZ')
					console.log('表单数据信息：', res);
					let params = uni.getStorageSync('params')
					res.子任务 = []
					res.id = params.子任务.length + 1
					params.子任务.push(res)
					console.log(params)
					uni.setStorageSync('params', params)
					// console.log(this.params)
					this.addChildTask()
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			addChildTask() {
				uni.navigateBack({
					delta: -1
				})
				// uni.showLoading({
				// 	mask: true
				// })
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 0 14rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
		font-size: 34rpx;
		position: relative;
		.left {
			font-size: 32rpx;
			// &:before {
			// 	content: '';
			// 	position: absolute;
			// 	top: 12rpx;
			// 	left: 24rpx;
			// 	width: 6rpx;
			// 	height: 34rpx;
			// 	background-color: #5094FF;
			// }
		}
		.right {
			// display: flex;
		}
		.add {
			font-size: 32rpx;
			font-weight: bold;
			color: #5094FF;
			margin-right: 10rpx;
		}
	}
	.empty {
		// width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 174rpx;
		color: #999;
	}
	.install-container {
		padding-bottom: 90rpx;
	}

	.color {
		color: #808080;
	}
	.btn {
		margin-top: 60rpx;
		width: 568rpx;
		height: 80rpx;
		position: fixed;
		bottom: 60rpx;
		line-height: 80rpx;
		margin-left: 80rpx;
		// margin-top: 160rpx;
		// background-color: #1152FC;
		background: linear-gradient(to right, #3350D9, #1152FC);
		color: #fff;
	}
	// .add-btn {
	// 	position: fixed;
	// 	bottom: 40rpx;
	// 	left: 0;
	// 	right: 0;
	// 	color: #fff;
	// 	background-color: #1152FC;
	// }
</style>
